<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>二手材料</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/mobileSelect.css">
    <link rel="stylesheet" href="../../css/varieties.css">

    <style scoped>
        .right>div:first-child {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .filter_area_pop .location {
            font-size: 14px;
            color: #3F8CEC;
            line-height: 50px;
            padding-left: 16px;
        }

        .screen-nav {
            display: flex;
            align-items: center;
            height: 60px;
        }

        .screen-item {
            flex-grow: 1;
            display: flex;
            justify-content: center;
        }

        .screen-item-line {
            height: 14px;
            width: 1px;
            background-color: #D8D8D8;
        }

        .list-box {
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* body {
            overflow-x: hidden
        } */
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="header-common">
            <div class="flex-x-s header">
                <span class="iconfont goback" @click="back">&#xe66f;</span>
                <div class="search flex-x-s" @click="goPage">
                    <span class="iconfont">&#xe71e;</span>
                    <input type="text" maxlength="20" placeholder="请搜索关键词" readonly>
                </div>
                <div class="search-btn" @click="goPage">搜索</div>
            </div>

            <!---筛选组件-->
            <div class="screen-nav flex-x-sa flex-wrap">
                <div class="screen-item flex-x-s" @click="select(0)">
                    <div :class="isSelectArea? 'filter-select-color':'filter-normal-color'">{{currentArea}}</div>
                    <span class="iconfont">&#xe665;</span>
                </div>
                <div class="screen-item-line"> </div>

                <div :class="selectType!=''?'select-type':''" class="screen-item">
                    <van-dropdown-menu active-color="#3F8CEC">
                        <van-dropdown-item v-model="selectType" :options="deformendTypes"
                            title-class="type_select-normal" @change="selectTypeClick" />
                    </van-dropdown-menu>
                </div>
                <div class="screen-item-line"> </div>
                <div :class="selectSort!='HIT_DESC'?'select-type':''" class="screen-item">
                    <van-dropdown-menu active-color="#3F8CEC">
                        <van-dropdown-item v-model="selectSort" :options="sortTypes" title-class="type_select-normal"
                            @change="selectSortClick" />
                    </van-dropdown-menu>
                </div>
                <div class="screen-item-line"> </div>

                <div class="screen-item flex-x-s" @click="select(3)">
                    <div :class="isFilterCategory?'filter-select-color':'filter-normal-color'">分类</div>
                    <img :src="isFilterCategory?' https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/filter_select.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/filter_normal.png'"
                        alt="" width="13" height="13">
                </div>
            </div>

            <!--钢材类型-->
            <div class="deformed_steel_type">
                <div class="deformed_steel_type_container" v-for="(item,index) in categoryRecomendList" :key="index"
                    @click="selectCategoryClick(index)">
                    <img :src="index==conditionTypeCurIndex&&index==0?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/all_category_selected.png':item.imageUrl"
                        alt="" :class="index==conditionTypeCurIndex?'ico-select':'ico-normal'">
                    <span :class="index==conditionTypeCurIndex?'name-select':'name-normal'">{{item.name}}</span>
                </div>
            </div>
        </div>
        <!--列表-->
        <div class="list-box">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="list-content" v-if="listData.length>0">
                <van-list class="deformed_scroll_list" v-model="loading" :finished="finished" finished-text="没有更多了"
                    @load="onLoad">
                    <div class="deformed_steel_list">
                        <div class="deformed_steel_list-item" v-for="item in listData" :key="item" @click="goDetail(item)">
                            <div class="left">
                                <img class="img-goods" :src="item.imageUrl" alt="">
                                <!-- <img class="img-goods"
                                    v-lazy="item.imageUrl?item.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'" alt=""> -->
    
                                <div class="type-sign" :class="item.type==0?'type-sign-rent':'type-sign-sale'">
                                    {{item.type==0?'出售':'出租'}}</div>
                            </div>
                            <div class="right">
                                <div class="title">{{item.title}}</div>
                                <div class="spec">规格: {{item.model}}</div>
                                <div class="bottom">
                                    <div class="shop-iden">{{item.typeName}}</div>
                                    <div class="distance">{{item.countDistance }}</div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="no-more" v-if="!hasNext">没有更多了</div> -->
                    </div>
                </van-list>
            </van-pull-refresh>
            <div class=" empty-content" v-if="listData.length==0">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                <div>暂无数据～</div>
            </div>
        </div>
        <!--筛选-->
        <div class="filter_pop">
            <van-popup v-model="showPopover" position="right" :style="{height:'100%', width:'77%' }">
                <div class="screen-condition">
                    <div>{{conditionName}}</div>
                    <div class="screen-condition-list flex-x-s flex-wrap">
                        <div class="screen-condition-item" v-for="(item,index) in categoryList" :key="index"
                            :class="{active:index == conditionCurIndex}" @click="selectPopTypeClick(index,item)">
                            {{item.name}}</div>
                    </div>
                    <div class="filter_pop_bottom">
                        <div class="filter_pop-confirm reset" @click="confirmFilterReset">重置</div>
                        <div class="filter_pop-confirm" @click="confirmFilterCategory(index)">确定</div>
                    </div>
                </div>
            </van-popup>
        </div>

        <!--发布按钮-->
        <div class="peijianshangcheng">
            <div class="release" id="editPage" @click="goEditPage">
                <div class="release-icon"></div>
                <div class="release-text">发布</div>
            </div>
        </div>

        <!--地区-->
        <div class="filter_area_pop" v-show="showPopArea">
            <van-popup v-model="showPopArea" position="top" :style="{height:'46%', width:'100%' }" duration="0">
                <!--定位信息-->
                <div class="flex-x-sb">
                    <div class="location" @click="selcetLocation()">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/location_ico.png" alt="" width="12" height="15">
                        {{locationArea}}
                    </div>
                    <div @click="resetLocation()" class="resetbtn">重置</div>
                </div>

                <!--城市信息-->
                <van-tree-select :items="provinceList" :active-id.sync="provinceActiveId"
                    :main-active-index.sync="provinceActiveIndex" @click-nav="onClickProvinceNav"
                    @click-item="onClickProvinceItem" />
            </van-popup>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script src="../../script/mobileSelect.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/province-new.js"></script>

    <script>
        apiready = function () {
            vm = new Vue({
                el: '.app',
                data: {
                    //请求分类列表的数据
                    queryCategoryList: {
                        pageNum: 1,
                        pageSize: 10000,
                        status: 1
                    },
                    //请求推荐分类列表
                    queryCategoryRecommendList: {
                        pageNum: 1,
                        pageSize: 10000,
                        status: 1,
                        recommended: true
                    },
                    categoryRecomendList: [],//分类列表

                    categoryList: [],//分类列表
                    conditionTypeCurIndex: 0,//当前选中的分类
                    locationArea: "",
                    isSelectArea: false,//是否选择了地区
                    currentArea: '地区',//当前地区
                    isFilterCategory: false,
                    isRecently: false,//是否是最新
                    isClickCategory: false,//是否选择了分类
                    selectType: '',//''全部 1 出租 0  出售
                    selectSort: 'HIT_DESC',

                    deformendTypes: [
                        { text: '全部类型', value: '' },
                        { text: '出租', value: '1' },
                        { text: '出售', value: '0' },
                    ],
                    sortTypes: [
                        { text: '综合排序', value: 'HIT_DESC' },
                        { text: '离我最近', value: 'LOCATION_ASC' },
                        { text: '最新排序', value: 'UPDATE_TIME_DESC' },
                    ],
                    listData: [],//列表数据
                    loading: false,
                    finished: false,
                    refreshing: false,
                    showPopover: false,
                    hasNext: true,
                    active: 0,
                    headerH: 0,
                    footerH: 0,
                    showPopArea: false,//展示地区
                    queryInfo: {
                        types: "",//类型：0出租 1出售
                        classIds: [],//分类
                        orderBy: 'HIT_DESC',//排序
                        location: '',
                        keyword: "",
                        cityName: null,
                        pageNum: 1,
                        pageSize: 10,
                        status: 1
                    },

                    wxList: ['地区', '类型', '最新', '分类'],
                    provinceList: [],//城市数据
                    provinceActiveId: '', // 右侧城市选中id
                    provinceActiveIndex: 0, // 左侧省选中项
                    conditionCurIndex: 0,//分类选中的position

                    conditionList: [],
                    conditionName: '类型',
                    conditionIndexObj: {
                        typeIndex: 0,
                        orderIndex: 0,
                        categoryIndex: 0,
                    },
                    conditionCurItem: {}, //选中的项
                    lat: null,
                    lon: null,
                    authStatus: {
                        merchant: -1,
                        personal: -1
                    },
                },

                mounted() {
                    var location = $api.getStorage('location_home') || {}
                    console.log(JSON.stringify(location))

                    this.queryInfo.location = location.location;
                    this.locationArea = location.name
                    this.calculateHeadHeight() // 计算头部高度
                    this.provinceList = PROVINCE_CITY_AREA // 获取城市列表
                    this.getAuthorizationStatus()
                    this.onLoad()
                    setBDPageStart("异型钢列表")
                },

                created() {
                    this.getCategoryList()//获取分类数据
                    this.getRecomendCategoryList()//获取推荐分类
                    // setBDPageStart("异型钢租售列表")
                },
                methods: {
                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function (ret) {
                            vm.authStatus.merchant = ret.data.merchant
                            vm.authStatus.personal = ret.data.personal
                        })
                    },
                    //请求分类数据
                    getCategoryList() {
                        var vm = this;
                        index.deformedSteel("getDeformedCategoryList")(this.queryCategoryList, function (ret) {
                            vm.categoryList = []
                            vm.categoryList.push({ name: "全部", id: '', imageUrl: "https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/category_all.png" })
                            vm.categoryList = vm.categoryList.concat(ret.data.list);

                            console.log('分类：', JSON.stringify(vm.categoryList));
                            vm.calculateHeadHeight()
                        })
                    },
                    //请求推荐分类数据
                    getRecomendCategoryList() {
                        var vm = this;
                        index.deformedSteel("getDeformedCategoryList")(this.queryCategoryRecommendList, function (ret) {
                            vm.categoryRecomendList = []
                            vm.categoryRecomendList.push({ name: "全部", id: '', imageUrl: "https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/category_all.png" })
                            vm.categoryRecomendList = vm.categoryRecomendList.concat(ret.data.list);

                            console.log('分类：', JSON.stringify(vm.categoryRecomendList));
                            vm.calculateHeadHeight()
                        })
                    },

                    // 计算header高度
                    calculateHeadHeight() {
                        var vm = this;
                        vm.$nextTick(() => {
                            var header = $api.dom('.header-common');
                            vm.headerH = $api.fixStatusBar(header);
                            // 
                            const minusHeadH = `margin-top: ${vm.headerH}px; height: ${api.winHeight-vm.headerH}px;`
                            $api.css($api.dom('.list-box'), minusHeadH)
                        })
                    },
                    //请求数据
                    onLoad(type) {
                        var vm = this;
                        //默认上海
                        var lon = 121.48
                        var lat = 31.22
                        if (vm.queryInfo.location) {
                            const location = this.queryInfo.location.split(',')
                            lon = location[0]
                            lat = location[1]
                        }

                        if (type == "refresh") {
                            vm.queryInfo.pageNum = 1
                        }

                        index.deformedSteel("getListDeformed")(vm.queryInfo, function (ret) {
                            // 计算距离
                            ret.data.list.map(item => {
                                let countDistance = getDistance(lat, lon, item.location
                                    .lat, item.location.lon)
                                countDistance = (Number(countDistance) / 1000).toFixed(
                                    0)
                                item.countDistance = countDistance > 500 ? '500km 以上' :
                                    countDistance + 'km'
                            })

                            if (vm.queryInfo.pageNum == 1) {
                                vm.listData = ret.data.list;
                            } else {
                                vm.listData = vm.listData.concat(ret.data.list);
                            }
                            console.log('列表Data：', JSON.stringify(ret.data));
                            vm.hasNext = ret.data.hasNext
                            vm.calculateHeadHeight()
                            vm.loading = false;
                            if (!vm.hasNext) {
                                console.log("")
                                vm.finished = true;
                            } else {
                                vm.queryInfo.pageNum++
                            }
                            if (vm.refreshing) {
                                vm.refreshing = false;
                            }
                        })
                    },
                    onRefresh() {
                        // 重新加载数据
                        this.loading = true;
                        this.refreshing = true
                        this.finished = false;
                        this.queryInfo.pageNum == 1
                        this.onLoad("refresh");
                    },

                    //选择排序
                    selectSortClick() {
                        this.queryInfo.orderBy = this.selectSort
                        this.onRefresh()
                    },
                    //选择类型
                    selectTypeClick() {
                        this.queryInfo.types = this.selectType
                        this.onRefresh()
                    },
                    selectCondition(index, item) {
                        this.conditionCurIndex = index
                        this.conditionCurItem = item
                    },

                    // 点击省 -列
                    onClickProvinceNav(index) {
                        this.provinceActiveIndex = index || 0
                    },

                    // 点击市-列
                    onClickProvinceItem(data) {
                        this.provinceActiveId = this.provinceActiveId === data.id ? null : data.id
                        this.queryInfo.cityName = data.text
                        this.queryInfo.location = data.lng + "," + data.lat
                        this.currentArea = data.text
                        this.isSelectArea = true

                        this.onRefresh()

                        this.showPopArea = false
                        // {"text":"惠州市","lng":114.412599,"lat":23.079404,"id":5}
                    },
                    //重置地区
                    resetLocation() {
                        this.queryInfo.cityName = ''
                        this.currentArea = '地区'
                        this.isSelectArea = true
                        this.onRefresh()
                        this.showPopArea = false
                    },
                    //选择当前的定位
                    selcetLocation() {
                        this.queryInfo.cityName = this.locationArea

                        this.currentArea = this.locationArea
                        this.isSelectArea = true

                        this.onRefresh()

                        this.showPopArea = false
                    },

                    //确认选择类别
                    confirmFilterCategory() {
                        var vm = this

                        this.isFilterCategory = true
                        this.showPopover = false
                        //this.conditionTypeCurIndex = this.conditionCurIndex
                        this.queryInfo.classIds = [this.categoryList[this.conditionCurIndex].id]
                        this.categoryRecomendList.forEach(function (element, index, array) {
                            if (element.id == vm.categoryList[vm.conditionCurIndex].id) {
                                vm.conditionTypeCurIndex = index
                            }
                        });
                        this.onRefresh()
                    },

                    selectPopTypeClick(index) {
                        this.conditionCurIndex = index
                    },
                    //重置选择类别
                    confirmFilterReset() {
                        this.isFilterCategory = false
                        this.showPopover = false
                        this.conditionTypeCurIndex = 0
                        this.conditionCurIndex = 0
                    },
                    //顶部选择分类
                    selectCategoryClick(index) {
                        var vm = this
                        this.conditionTypeCurIndex = index
                        //this.conditionCurIndex = index
                        this.queryInfo.classIds = [this.categoryRecomendList[index].id]

                        this.categoryList.forEach(function (element, index1, array) {
                            if (element.id == vm.categoryRecomendList[vm.conditionTypeCurIndex].id) {
                                vm.conditionCurIndex = index1
                            }
                        });

                        this.onRefresh()
                    },
                    //详情
                    goDetail(item) {
                        api.openWin({
                            name: 'deformed_detail_win',
                            url: 'deformed_detail_win.html',
                            bounces: false,
                            pageParam: {
                                id: item.id,
                                // title: "",
                                // titlePlus: '异型钢租售'
                            }
                        });
                    },
                    //搜索
                    goPage() {
                        api.openWin({
                            name: 'deformed_search_win',
                            url: 'deformed_search_win.html',
                            bounces: false,
                            pageParam: {
                                isHistory: false,
                                title: "",
                                titlePlus: '二手材料'
                            }
                        });
                    },
                    back() {
                        setBDPageEnd("异型钢列表")
                        api.closeWin();
                    },
                    //跳转到发布页
                    goEditPage: function () {
                        if (!checkToken()) return false;
                        if (vm.authStatus.merchant == 1 || vm.authStatus.personal == 1) {
                            api.openWin({
                                name: 'release_edit_win',
                                url: '../release/release_edit_win.html',
                                bounces: false,
                                pageParam: {
                                    editName: '二手材料',
                                    status: 'edit'
                                }
                            });
                        } else {
                            toastMiddle('认证通过后才可进行发布')
                        }
                    },

                    select(index) {
                        switch (index) {
                            case 0://地区
                                this.showPopArea = !this.showPopArea
                                setTimeout(() => {
                                    if (this.showPopArea && $api.dom('.filter_area_pop .van-overlay')) {
                                        var screenC = $api.dom('.deformed_steel_type');
                                        this.typeH = $api.offset(screenC).h;

                                        const headHeight = this.headerH - this.typeH
                                        const screencStr1 = `top: ${headHeight}px;opacity: 1; `
                                        const screencStr = `height: calc(100% - ${headHeight}px);`

                                        // $api.css($api.dom('.screen-condition'), screencStr)
                                        $api.css($api.dom('.filter_area_pop .van-overlay'), screencStr1)
                                        $api.css($api.dom('.filter_area_pop .van-popup'), screencStr1)
                                    }
                                }, 100)
                                break
                            case 1://类型
                                break
                            case 2://最新
                                break
                            case 3://分类
                                this.conditionName = '选择分类'
                                this.showPopover = !this.showPopover
                                setTimeout(() => {
                                    if (this.showPopover && $api.dom('.filter_pop .van-overlay')) {
                                        var screenC = $api.dom('.deformed_steel_type');
                                        this.typeH = $api.offset(screenC).h;

                                        const headHeight = this.headerH - this.typeH
                                        const screencStr1 = `top: ${headHeight}px;opacity: 1; `
                                        const screencStr = `height: calc(100% - ${headHeight}px);`

                                        $api.css($api.dom('.screen-condition'), screencStr)
                                        $api.css($api.dom('.filter_pop .van-overlay'), screencStr1)
                                        $api.css($api.dom('.filter_pop .van-popup'), screencStr1)
                                    }
                                }, 100)
                                break
                        }
                    },
                },
            })

            api.addEventListener({
                name: 'keyback'
            }, function (ret, err) {
                setBDPageEnd("异型钢列表")
                api.closeWin();
            });

            api.addEventListener({
                name: 'login'
            }, function (ret, err) {
                // vm.getAuthorizationStatus()
            });

            api.addEventListener({
                name: 'searchDeformed'
            }, function (ret, err) {
                vm.queryInfo.keyword = ret.value.keyword
                vm.onRefresh()
                // vm.getAuthorizationStatus()
            });
        }
    </script>
</body>

</html>